# Design System Quick Reference

## 🚀 Getting Started

### Installation

```tsx
import { Button, Badge, Card } from './design-system/components';
import './design-system/tokens.css';
```

---

## 📦 Components

### Button

```tsx
// Primary button (warm accent)
<Button variant="primary" size="lg">Sign up</Button>

// Secondary button (outlined dark)
<Button variant="secondary" size="md">Learn More</Button>

// Ghost button (outlined light)
<Button variant="ghost-light" size="sm">Cancel</Button>
```

**Props:**
- `variant`: `'primary' | 'secondary' | 'ghost-light' | 'ghost-dark'`
- `size`: `'sm' | 'md' | 'lg'`

---

### Badge

```tsx
// Dark badge
<Badge variant="dark">Success analytics</Badge>

// Outlined badge
<Badge variant="outlined">SKENE.AI</Badge>

// Accent badge
<Badge variant="accent">PRICING</Badge>

// Light badge (on dark background)
<Badge variant="light">Getting started</Badge>
```

**Props:**
- `variant`: `'dark' | 'outlined' | 'accent' | 'light'`

---

### Card

```tsx
// Basic card
<Card variant="glassmorphic-dark">
  Content here
</Card>

// Feature card (pre-styled)
<FeatureCard
  badge="Success analytics"
  description="Real-time visibility into what's working."
/>

// Pricing card (pre-styled)
<PricingCard
  plan="Free plan"
  price="0€/month"
  badge="getting started"
  features={['1 live site', 'Basic analytics']}
  buttonText="Try for free →"
  variant="dark"
/>
```

**Props:**
- `variant`: `'glassmorphic-light' | 'glassmorphic-dark' | 'solid-light' | 'solid-dark'`

---

### StatCard

```tsx
<StatCard value="5m" label="Average setup time" />
<StatCard value="95%" label="Customer satisfaction" />
<StatCard value="3x" label="Increase in completion rate" />
```

---

### Typography

```tsx
// Display text with gradient
<DisplayLarge>
  <GradientText variant="warm">5m</GradientText>
</DisplayLarge>

// Headings
<Heading1 className="text-[#ebdccf]">Section Title</Heading1>
<Heading2 className="text-[#ebdccf]">Subsection</Heading2>
<Heading3 className="text-[#ebdccf]">Card Title</Heading3>

// Body text
<BodyLarge className="text-[#a1a1a1]">Description text</BodyLarge>
<BodyMedium className="text-[#757171]">Content text</BodyMedium>
<BodySmall className="text-[#6a6a6a]">Small text</BodySmall>

// Labels
<LabelSmall className="text-[#edc29c]">uppercase label</LabelSmall>
<LabelTiny className="text-[#ebdccf]">tiny label</LabelTiny>
```

---

### Section & Container

```tsx
// Section with background and padding
<Section background="dark" padding="large">
  <Container variant="narrow">
    {/* Content */}
  </Container>
</Section>

// Section header (pre-styled)
<SectionHeader
  badge="Product-led growth"
  badgeVariant="outlined"
  title="More than just onboarding"
  subtitle="Everything you need to reach PLG."
  align="center"
/>
```

**Section Props:**
- `background`: `'dark' | 'light' | 'warm' | 'transparent'`
- `padding`: `'small' | 'medium' | 'large' | 'none'`

**Container Props:**
- `variant`: `'default' | 'narrow' | 'content'`

---

### Divider

```tsx
// Simple divider
<Divider variant="light" />

// SVG divider (animated stroke)
<SVGDivider variant="subtle" />
```

**Props:**
- `variant`: `'light' | 'dark' | 'subtle'`

---

## 🎨 Color Reference

### Usage in Tailwind

```tsx
// Backgrounds
className="bg-[#060606]"  // Primary dark
className="bg-[#2c2c2c]"  // Secondary dark
className="bg-[#faf1e9]"  // Light
className="bg-[#edc29c]"  // Warm accent

// Text colors
className="text-[#ebdccf]"  // Primary light text
className="text-[#a1a1a1]"  // Muted light text
className="text-[#2c2c2c]"  // Primary dark text
className="text-[#757171]"  // Muted dark text

// Borders
className="border border-[rgba(255,255,255,0.1)]"
className="border border-[#353535]"
className="border border-[#edc29c]"
```

---

## 📏 Spacing Scale

```css
gap-[4px]   /* --space-1 */
gap-[8px]   /* --space-2 */
gap-[16px]  /* --space-4 */
gap-[18px]  /* --space-5 */
gap-[26px]  /* --space-7 */
gap-[32px]  /* --space-8 */
gap-[40px]  /* --space-10 */
gap-[62px]  /* --space-16 */
```

---

## 🔲 Border Radius

```css
rounded-[4px]   /* --radius-sm */
rounded-[8px]   /* --radius-md */
rounded-[12px]  /* --radius-lg */
rounded-[16px]  /* --radius-xl */
```

---

## ✨ Common Patterns

### Hero Section

```tsx
<Section background="dark" padding="large">
  <Container variant="narrow">
    <div className="flex flex-col items-center gap-[40px] text-center">
      <Badge variant="outlined">CUSTOMER SUCCESS AI AGENT</Badge>
      <Heading1 className="text-[#ebdccf]">
        Your Hero Title
      </Heading1>
      <BodyLarge className="text-[#a1a1a1] max-w-[580px]">
        Your description text here.
      </BodyLarge>
      <Button variant="primary" size="lg">Get Started →</Button>
    </div>
  </Container>
</Section>
```

### Feature Grid

```tsx
<Section background="light" padding="large">
  <Container>
    <SectionHeader
      badge="Features"
      title="More than just onboarding"
      subtitle="Everything you need to succeed."
      align="center"
      className="text-[#2c2c2c] mb-[62px]"
    />
    
    <div className="flex flex-wrap gap-[18px] justify-center">
      <FeatureCard
        badge="Analytics"
        description="Track what matters most."
      />
      <FeatureCard
        badge="Automation"
        description="Save time with AI."
      />
    </div>
  </Container>
</Section>
```

### Stats Section

```tsx
<Section background="dark" padding="medium">
  <Container>
    <div className="flex gap-[18px] justify-center flex-wrap">
      <StatCard value="5m" label="Average setup time" />
      <StatCard value="95%" label="Customer satisfaction" />
      <StatCard value="3x" label="Increase in completion" />
    </div>
  </Container>
</Section>
```

### Pricing Section

```tsx
<Section background="dark" padding="large">
  <Container>
    <SectionHeader
      badge="PRICING"
      badgeVariant="accent"
      title={
        <>
          Simple, reliable,{' '}
          <span className="text-[#edc29c]">outcome-based</span> pricing
        </>
      }
      subtitle="Only pay when your customer succeeds."
      className="text-[#ebdccf] mb-[100px]"
    />
    
    <div className="flex gap-6 justify-center flex-wrap">
      <PricingCard {...freePlanProps} />
      <PricingCard {...growthPlanProps} />
    </div>
  </Container>
</Section>
```

### FAQ Section

```tsx
<Section background="dark" padding="large">
  <Container>
    <SectionHeader
      badge="FAQs"
      badgeVariant="accent"
      title="Frequently Asked Questions"
      subtitle="Everything you need to know"
      className="text-[#ebdccf] mb-[90px]"
    />
    
    <div className="max-w-[647px] ml-auto space-y-[25px]">
      <Heading3 className="text-[#ebdccf]">
        How do I get started?
      </Heading3>
      <Divider variant="subtle" />
      {/* More FAQ items */}
    </div>
  </Container>
</Section>
```

---

## 🎯 Best Practices

### Do's ✅

- Use design tokens (CSS variables) when available
- Maintain consistent spacing (multiples of 4px)
- Use typography components for text
- Follow the established color palette
- Use semantic HTML elements
- Ensure proper contrast ratios

### Don'ts ❌

- Don't create custom colors outside the palette
- Don't use arbitrary spacing values
- Don't mix font families inconsistently
- Don't override component styles without reason
- Don't skip accessibility considerations

---

## 🔗 Resources

- Full Documentation: `/src/design-system/README.md`
- Design Tokens: `/src/design-system/tokens.css`
- Components: `/src/design-system/components/`
- Examples: `/src/design-system/examples/DesignSystemShowcase.tsx`